<template>
    <el-form :model="ProRouteProcess" :rules="rules" ref="ruleForm" class="demo-ruleForm page-form">
        <el-row>
            <el-row>
                <el-col :span="7">
                    <el-form-item label="工序" prop="ProcessName">
                        <el-select :value="ProRouteProcess.ProcessName" v-loading="isLoading" @change="ProcessChange"
                            @focus="ProcessSelect" style="width:100px">
                            <el-option v-for="item in ProcessSelectData" :key="item.Id" :label="item.ProcessName"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="7">
                    <el-form-item label="甘特图显示颜色" prop="ColorCode">
                        <el-color-picker v-model="ProRouteProcess.ColorCode"
                            :show-overflow-tooltip="true"></el-color-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="10">
                    <el-form-item prop="ColorCode" label="颜色编码">
                        <el-input v-model="ProRouteProcess.ColorCode" placeholder="请输入颜色编码"
                            style="width:130px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="准备时间（分钟）" prop="DefaultPreTime">
                        <el-input-number v-model="ProRouteProcess.DefaultPreTime" :min="1"
                            style="width:125px"></el-input-number>
                    </el-form-item>
                    <el-form-item label="等待时间（分钟）" prop="DefaultSufTime">
                        <el-input-number v-model="ProRouteProcess.DefaultSufTime" :min="1"
                            style="width:125px"></el-input-number>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="工序关系" prop="LinkType">
                        <el-select v-model="ProRouteProcess.LinkType" placeholder="请选择与下一道关系关系" style="width:200px">
                            <el-option label="S-to-S" value="S-to-S"></el-option>
                            <el-option label="S-to-F" value="S-to-F"></el-option>
                            <el-option label="F-to-S" value="F-to-S"></el-option>
                            <el-option label="F-to-F" value="F-to-F"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="是否关键工序" prop="KeyFlag">
                        <el-select v-model="ProRouteProcess.KeyFlag" placeholder="请选择" style="width:160px">
                            <el-option label="是" value="Y"></el-option>
                            <el-option label="否" value="N"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-col :span="24">
                <el-form-item label="备注" prop="Remark" class="item-center">
                    <el-input type="textarea" v-model="ProRouteProcess.Remark"></el-input>
                </el-form-item>
            </el-col>

        </el-row>

        <el-form-item class="item-right">
            <el-button type="primary" @click="submitForm">{{ ProcessisUpdate ? '立即保存' : '立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>

    </el-form>
</template>
<script>

export default {
    props: {
        ProRouteProcess: {
            require: true,
            type: Object
        },
        ProcessisUpdate: {
            require: true,
            type: Boolean
        }
    },
    data() {
        return {
            ProcessSelectData: [],
            isLoading: false,
            rules: {
                ProcessName: { required: true, message: '工序不能为空', trigger: 'blur' },
                ColorCode: { required: true, message: '请输入颜色编码或选择颜色' },
                KeyFlag: { required: true, message: '请指定当前工序是否关键工序' },
            }
        }
    },
    /*created() {
        //this.ProRouteProcess = { ...this.initialProRouteProcess }
        console.log(this.ProRouteProcess)
        console.log(this.ProcessisUpdate)
    },*/
    methods: {
        ProcessChange(model) {
            this.ProRouteProcess.ProcessName = model.ProcessName
            this.ProRouteProcess.ProcessCode = model.ProcessCode
            this.ProRouteProcess.ProcessId = model.Id
        },
        //工序选择下拉框
        ProcessSelect() {
            this.isLoading = true
            this.$http.get('/api/ProProcess/GetAll',)
                .then((res) => {
                    this.ProcessSelectData = res.Data
                    console.log(res)
                    this.isLoading = false
                })
        },
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.addput()
                } else {
                    this.showNotify('请输入必填项')
                    return false
                }
            })
        },
        resetForm() {
            this.$refs['ruleForm'].resetFields()
        },
        addput() {
            console.log(this.ProRouteProcess)
            this.$emit('callback', this.ProRouteProcess)
        }
    }

}
</script>
<style scoped>
.item-center {
    padding-left: 20px;
    padding-right: 20px;
}

.item-right {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}
</style>
